<template>

    <div class="box">
        <div class="box_private">
            <div class="left_img">
               <div class="left_img_content">
                   <img :src="trivia.triviaImage" alt="" v-if="privateSpace.triviaImage!==''">
                   <h3 v-else>暂无图片</h3>
               </div>
                <div class="but">
                    <a class="file">上传图片
                        <input type="file" name="file" id="myFile"   ref="img" @change="fil_($event)">
                    </a>
                </div>
            </div>
            <div class="right_content">
                <p v-html="trivia.content" contenteditable="true" ref="edit" @blur="contentBody" ></p>
                <div class="but_ ">
                    <button class="upload" @click="submit">提交</button>
                    <button class="upload" @click="shutDown_">关闭</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import api from "@/api";
import {baseUrl} from "@/config/api/global";

export default {
    props:['privateSpace'],
    name: "PrivateSpaceEdit",
    data(){
      return{
          files_:"",
          url_old:"",
          trivia:{
              id:0,
              content:"",
              triviaImage:"",
          }
      }
    },
    watch:{
        privateSpace(newValue,oldValue){
            this.privateSpace = newValue;
        }
    },
    mounted() {
           this.url_old = this.privateSpace.triviaImage;
           this.trivia = this.privateSpace
    },
    methods:{
        contentBody(){
            this.trivia.content = this.$refs.edit.innerText
        },
        submit() {
            this.trivia.content = this.$refs.edit.innerHTML
            // 添加需要上传的文件
            const form = new FormData();
            if(this.files_ !== ""){
                form.append('file', this.files_);
            }
            if(this.trivia.id === ""){
                this.insertTrivia(form)
            }else {
                this.updateTrivia(form)
            }
            this.shutDown_();
        },
        //新增琐事
        insertTrivia(form){
            form.append('content', this.trivia.content);
            api.insertTrivia(form).then((res)=>{
                if(res.data.code === 200){
                    this.$store.commit("requestInfo", "新增成功!");
                }else {
                    this.$store.commit("requestInfo", "新增失败!");
                }
            })
        },
        //更新琐事
        updateTrivia(form){
            form.append('triviaImage', this.url_old);
            form.append('content', this.trivia.content);
            form.append('id', this.trivia.id);
            api.updateTrivia(form).then((res)=>{
                if(res.data.code === 200){
                    this.$store.commit("requestInfo", "更新成功!");
                }else {
                    this.trivia.triviaImage = this.url_old;
                    this.$store.commit("requestInfo", "更新失败!");
                }
            })
        },
        shutDown_(){
            this.$emit("shutDown");
        },
        fil_(event){
            this.files_ = event.target.files[0];
            this.trivia.triviaImage = this.echo(event);
        },
        echo(event){
            //根据这个 <input> 获取文件的 HTML5 js 对象
            let files = event.target.files;
            let file;
            if (files && files.length > 0) {
                // 获取目前上传的文件
                file = files[0];
                // 那么我们可以做一下诸如文件大小校验的动作
                if (file.size > 1024 * 1024 * 5) {
                    this.$store.commit("requestInfo", "图片大小不能超过 5MB!");
                    return "";
                }
                // 获取 window 的 URL 工具  通过这个 file 对象生成一个可用的图像 URL
                let URL = window.URL || window.webkitURL;
                // 通过 file 生成目标 url
                return  URL.createObjectURL(file);
            }
        },
    }
}
</script>

<style scoped>
.box{
    position: absolute;
    top: 30%;
    left: 30%;
    background: #fdfcfc;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
    animation: box_p 0.4s ease-in-out 0s 1 forwards;
}
@keyframes box_p {
    0%{
        transform: scale(0);
    }
    60%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}
.box_private{
    width: 900px;
    height: 350px;
    display: flex;
    justify-content: left;

}
.left_img{
    width: 50%;
    border-right: 1px solid #8f8c8c;
}
.left_img_content{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80%;
    padding: 5px;
}
.left_img_content img{
    max-width: 100%;
    aspect-ratio: 16/10;
}
.but_{
    margin: auto;
    margin-right: 350px;
    width: 140px;
    height: 20%;
    display: flex;
    /*justify-content: left;*/
    align-items: center;
}
.but{
    margin: auto;
    width: 140px;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.upload:hover{
    opacity: .8;
    cursor:pointer;
}
.upload{
    outline: none;
    border: 0;
    padding: 8px 14px;
    border-radius: 3px;
    color: white;
    background: #3586f1;
    margin: auto;
}
.right_content{
    width: 50%;
}
.right_content p{
    height: 80%;;
    word-break: break-all;
    overflow: auto;
    letter-spacing: 1px;
    outline: none;
    padding: 5px 5px;
    border: 1px solid #8f8c8c;
}
.right_content p::-webkit-scrollbar {
    width: 6px;
}
.right_content p::-webkit-scrollbar-thumb {
    border-radius: 1px;
    background: #f1c3d5;
}
.right_content p::-webkit-scrollbar-track {
    border-radius: 0;
    background: #f9f9fc;
}



.file {
    position: relative;
    display: inline-block;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
.file:hover {
    border-color: #78C3F3;
    text-decoration: none;
    cursor: pointer;
    opacity: .8;
}
</style>